<template>
  <!--设置一个控件选项和其他控件的联动，设置需要显示的控件-->
  <el-radio-group
    v-model="optionValue"
    :id="'c' + columnId"
    :name="'c' + columnId"
    size="mini"
  >
    <el-radio
      v-for="item in optionList"
      :key="'radio' + columnId + item.value"
      :label="item.value"
    >
      {{item.label}}
    </el-radio>
  </el-radio-group>
  <!--操作，全选，删除-->
  <div>
    <el-checkbox
      v-model="checkAll"
      :indeterminate="isIndeterminate"
      >Check all</el-checkbox
    >&nbsp;&nbsp;&nbsp;
    <el-button type="" @click="del" size="mini" >删除联动</el-button>
  </div>
  <!--显示表单控件的字段，设置关联关系-->
  <el-checkbox-group v-if="optionValue > 0"
    v-model="checkValue2"
    size="mini"
  >
    <el-checkbox style="width: 120px;"
      v-for="(item, index) in colOrder"
      :key="index"
      :label="item"
    >
      {{itemMeta[item].label}}
    </el-checkbox>
  </el-checkbox-group>
</template>

<script>
  import { computed, ref } from 'vue'
  import { ElRadioGroup, ElRadio, ElCheckbox, ElCheckboxGroup } from 'element-plus'

</script>


<script setup>

  const props = defineProps({
    formMeta: [Object],
    columnId: Number // 主控件
  })

  const formMeta = props.formMeta
  const { itemMeta, formColShow, colOrder } = props.formMeta

  // 发起者的选项列表
  const optionList = computed( () => {
    if (itemMeta[props.columnId].optionList) {
      return itemMeta[props.columnId].optionList
    } else {
      return []
    }
  })

  // 发起者选了哪个选项
  const optionValue = ref(0)

  const checkValue2 = computed({
    set: (val) => {
      if (formColShow[props.columnId]) {
        if (formColShow[props.columnId][optionValue.value]) {
          // 有联动，清空重新设置
          formColShow[props.columnId][optionValue.value].length = 0
          formColShow[props.columnId][optionValue.value].push(...val)
        } else {
          // 没有联动，添加新的
          formColShow[props.columnId][optionValue.value] = val
        }
      } else {
        // 没有联动，添加新的
        formColShow[props.columnId] = {}
        formColShow[props.columnId][optionValue.value] = val
      }
    },
    get: () => {
      if (formColShow[props.columnId]) {
        return formColShow[props.columnId][optionValue.value] ?? []
      } else {
        return []
      }
    }
  })

  // 设置全选
  const isIndeterminate = ref(false)
  const checkAll = computed({
    set: (val) => {
      console.log(val, 6)
      checkValue2.value.length = 0
      if (val) {
        // 全选
        checkValue2.value.push(...colOrder)
      }
    },
    get: () => {
      const re = checkValue2.value.length === colOrder.length
      if (re) {
        isIndeterminate.value = false
      } else {
        if (checkValue2.value.length > 0) 
          isIndeterminate.value = true
      }
      return re
    }
  })

  // 删除联动
  const del = () => {
    delete formColShow[props.columnId]
  }
</script>